<!--
 * @Description: 
 * @Author: wanghongjian
 * @@github: https://github.com/whj0117
 * @Date: 2025-11-06 17:16:47
 * @LastEditors: wanghongjian
 * @LastEditTime: 2025-11-13 16:00:29
-->
<template>
  <div class="dashboard-container">
    <div class="title">被投诉人信息列表</div>
    <div class="tags-item">
      <div class="filter-wrap">
        <div class="filter-container">
          <el-input
            v-model.trim="query.purchaseOrderNumber"
            clearable
            placeholder="被投诉人姓名/昵称"
            @keyup.enter.native="search"
          />
          <el-input
            v-model.trim="query.purchaseOrderNumber"
            clearable
            placeholder="投诉人姓名/昵称"
            @keyup.enter.native="search"
          />
          <el-date-picker
            v-model="q_z_formDate"
            clearable
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            start-placeholder="投诉开始时间"
            end-placeholder="投诉结束时间"
            @change="q_z_selectTime"
          />
          <el-select v-model="value" clearable placeholder="处理结果">
            <el-option label="已封禁" value="0"></el-option>
            <el-option label="已致电" value="1"></el-option>
            <el-option label="未处理" value="2"></el-option>
          </el-select>
          <el-date-picker
            v-model="q_z_formDate"
            clearable
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            start-placeholder="处理开始时间"
            end-placeholder="处理结束时间"
            @change="q_z_selectTime"
          />
          <el-button
            @click="search"
            type="primary"
            style="background-color: #ff47ab; border-color: #ff47ab"
          >
            搜索
          </el-button>
        </div>
      </div>
      <div class="table-data">
        <el-table
          :data="tableData1"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            'background-color': '#E3E5E8',
          }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column prop="date" label="被投诉人姓名"> </el-table-column>
          <el-table-column prop="name" label="被投诉人昵称"> </el-table-column>
          <el-table-column prop="address" label="被投诉时间"> </el-table-column>
          <el-table-column prop="address" label="被投诉内容"> </el-table-column>
          <el-table-column prop="address" label="投诉人姓名"> </el-table-column>
          <el-table-column prop="address" label="投诉人昵称"></el-table-column>
          <el-table-column prop="address" label="处理人"> </el-table-column>
          <el-table-column prop="address" label="处理结果"> </el-table-column>
          <el-table-column prop="address" label="处理时间"> </el-table-column>
          <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" style="color:#FF47AB" @click="handleComplaint">
                  去处理
                </el-button>
              </template>
            </el-table-column>
        </el-table>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="query.pageIndex"
      :limit.sync="query.pageSize"
      @pagination="getInfo"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
export default {
  name: "Datalist",
  components: { Pagination },
  data() {
    return {
      value1: false,
      activeName: "first",
      isEdit: false,
      tableData: [
        {
          first: "昵称",
          second: "昵称123",
          third: "上海市",
          fourth: 111,
        },
        {
          first: "性别",
          second: "王小虎",
          third: "上海市",
          fourth: 111,
        },
        {
          first: "身高",
          second: "王小虎",
          third: "上海市",
          fourth: 111,
        },
        {
          first: "民族",
          second: "王小虎",
          third: "上海市",
          fourth: 111,
        },
      ],
      query: {},
      q_z_formDate: [],
      tableData1: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区",
        },
      ],
      total: 1,
    };
  },
  computed: {},
  mounted() {},
  methods: {
    handleComplaint(){
      this.$router.push({
        path:'/handlecomplaints'
      })
    },
    getInfo() {},
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    handleEdit() {
      this.isEdit = !this.isEdit;
    },
  },
  beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
.dashboard-container {
  min-height: calc(100vh - 84px);
  .title {
    font-weight: bold;
    font-size: 16px;
    color: #222222;
  }
  .tags-item {
    margin: 30px 0 20px;
    .tags-item-list {
      margin-bottom: 60px;
      &:last-child {
        margin-bottom: 0;
      }
      .list-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          height: 14px;
          line-height: 14px;
          padding-left: 16px;
          border-left: 4px solid #ff47ab;
          box-sizing: border-box;
          font-weight: bold;
          font-size: 14px;
          color: #222222;
        }
        .line {
          flex: 1;
          margin: 0 20px;
          border-top: 1px dashed #999999;
        }

        .edit {
          font-weight: 400;
          font-size: 14px;
          color: #222222;
          cursor: pointer;
        }
      }
      .list-content {
        margin-top: 30px;
        ::v-deep .tableColumnClassName {
          background-color: #f1f3f7;
        }
        &.information-authentication {
          display: flex;
          align-items: center;
          .info-item {
            margin-right: 46px;
            font-size: 14px;
            color: #777777;
            & > img {
              width: 50px;
              height: 50px;
              margin-bottom: 12px;
            }
          }
        }

        &.textarea-content {
          line-height: 20px;
          font-size: 14px;
          color: #444444;
        }

        &.interrogate-content {
          .interrogate-item {
            margin-bottom: 30px;
            font-weight: 400;
            font-size: 14px;
            color: #444444;
            line-height: 20px;
            &:last-child {
              margin-bottom: 0;
            }
            .interrogate-title {
              margin-bottom: 16px;
              font-size: 14px;
              color: #ff47ab;
            }
            .interrogate-text {
              padding-left: 20px;
              box-sizing: border-box;
            }
          }
        }
      }
    }
    .filter-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      .filter-container {
        margin-bottom: 0;
      }
    }
  }
}
</style>